<template>
	<view>
		<!-- 头部 -->
		<view class="playmusic_head">
			<!-- 返回箭头 -->
			<view class="playmusic_head_backjt">
				<image src="../../../static/xiallajiantou.png" mode=""></image>
			</view>
			<!-- 歌曲姓名 -->
			<!-- 歌曲的歌手 -->
			<!-- 关注歌手 -->
			<view class="playmusic_head_music">
				<text class="playmusic_head_music_name">Mistletoea</text>
				<text class="playmusic_head_music_author">itsNoah</text>
			</view>
			<!-- 分享 -->
			<view class="playmusic_head_share">
				<image src="../../../static/playmusic/share.png" mode=""></image>
			</view>
		</view>
		<!-- 主体部分 -->
		<view class="playmusic_center ">
			<!-- 唱片图片 -->
			<image src="../../../static/playmusic/changpian1.png" mode="" class="playmusic_center_image1"></image>
			<!-- 歌曲封面 -->
			<image src="../../../static/playmusic/changpian2.png" mode="" class="playmusic_center_image2"></image>
		</view>

		<!-- 功能模块 -->
		<view class="playmusic_function">
			<!-- 添加到我的喜欢 -->
			<image src="../../../static/playmusic/aixin.png" mode="" class="playmusic_function_image1"></image>
			<!-- 下载 -->
			<image src="../../../static/playmusic/xiazai.png" mode="" class="playmusic_function_image2"></image>
			<!-- 唱 -->
			<image src="../../../static/playmusic/chang.png" mode="" class="playmusic_function_image3"></image>
			<!-- 评论 -->
			<image src="../../../static/playmusic/pinglun.png" mode="" class="playmusic_function_image4"></image>
			<!-- 更多 -->
			<image src="../../../static/playmusic/gengduo.png" mode="" class="playmusic_function_image5"></image>
		</view>

		<!-- 进度条 -->
		<progress1></progress1>
		<!-- 播放功能 -->
		<!-- 播放顺序 -->
		<!-- 上一曲 -->
		<!-- 暂停 -->
		<!-- 下一曲 -->
		<!-- 播放歌单 -->

	</view>
</template>

<script>
	import progress1 from '../../../components/find/comonents/progress.vue'
	export default {
		data() {
			return {

			}
		},
		components:{
			progress1
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background: #1c140e;
	}

	.playmusic_head {
		width: 750rpx;
		height: 100rpx;
		margin-top: 20rpx;

		.playmusic_head_backjt {
			image {
				width: 80rpx;
				height: 80rpx;
			}

		}

		.playmusic_head_music {
			width: 600rpx;
			height: 100rpx;
			position: absolute;
			top: 0;
			left: 80rpx;

			.playmusic_head_music_name {
				width: 600rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
				position: absolute;
				top: 10rpx;

			}

			.playmusic_head_music_author {
				width: 600rpx;
				text-align: center;
				color: #696967;
				font-size: 10rpx;
				position: absolute;
				top: 50rpx;

			}
		}

		.playmusic_head_share {
			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 20rpx;
				right: 10rpx;
			}

		}
	}

	// 中心部分
	.playmusic_center {
		width: 700rpx;
		height: 800rpx;
		margin-top: 40rpx;
		margin-left: 25rpx;
		position: relative;

		.playmusic_center_image1 {
			width: 320rpx;
			height: 270rpx;
			position: absolute;
			left: 300rpx;
		}

		.playmusic_center_image2 {
			width: 500rpx;
			height: 500rpx;
			position: absolute;
			top: 200rpx;
			left: 100rpx;
		}
	}
	.playmusic_function{
		width:600rpx;
		height: 70rpx;
		border: 1px solid red;
		position: relative;
		top:300rpx;
		margin-left:75rpx;
		.playmusic_function_image1{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:14rpx;
			
		}
		.playmusic_function_image2{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:14rpx;
			left:140rpx;
		}
		.playmusic_function_image3{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:14rpx;
			left:280rpx;
		}
		.playmusic_function_image4{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:14rpx;
			left:420rpx;
		}
		.playmusic_function_image5{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:14rpx;
			left:560rpx;
		}
		
	}
	
</style>
